<template>
	<view class="transfer">
		<view class="transfer-tast">
			转账账户
		</view>
		<view class="box">
			<view class="input">
				<input type="number" v-model="phone" placeholder="手机号"/>
			</view>
			<view class="input">
				<input type="text" maxlength="30" v-model="remarks" placeholder="备注信息(非必填)"/>
			</view>
		</view>
		<view class="transfer-tast">
			数量
		</view>
		<view class="box">
			<view class="input num">
				<input type="number" v-model="acount" placeholder="0.00000"/>
				<text class="fu">ZKB</text>
				<text class="solid">|</text>
				<text @click="extract()">提取全部</text>
			</view>
		</view>
		<view class="transfer-tast">
			手续费
		</view>
		<view class="box">
			<view class="input sxf">
				<input type="text" disabled v-model="charge" placeholder="0"/>
				<text class="fu">ZKB</text>
			</view>
		</view>
		<view class="rules">
			<view class="rule">
				<text>*</text>
				<text>支持金额：最低转账金额为10ZKB。</text>
			</view>
			<view class="rule">
				<text>*</text>
				<text>转账手续费：{{fee}}%</text>
			</view>
			<view class="rule">
				<text>*</text>
				<text>转客盟在任何情况下都不会要求您向某一账户地址转账，也不会向你索要验证码。</text>
			</view>
			<view class="rule">
				<text>*</text>
				<text>谨防网络诈骗。</text>
			</view>
		</view>
		<view class="btn">
			<button type="default" :disabled="isDisplay" @click="submit()">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		configs
	} from "@/api/entrance.js"
	import {transfer} from "@/api/record.js"
	import {mapState,mapActions} from "vuex";
	export default{
		name:"transfer",
		data(){
			return{
				phone:"",
				remarks:"",
				acount:"",
				charge:"",
				isDisplay:true,
				fee:10,
			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url:"/pages/users/bill/bill"
			})
		},
		onLoad(option) {
			if(!this.isLogin){
				uni.navigateTo({
					url:"/pages/entrance/login/login"
				})
				return;
			}
			configs({
				type: 'transfer_fee'
			}).then(res => {
				if (res.code === 1) {
					this.fee = res.data;
				}
			})
		},
		computed:{
			...mapState(["isLogin","userInfo"]),
		},
		methods:{
			...mapActions(['setUserInfo_action']),
			async submit(){
				if(Number(this.acount)>Number(this.userInfo.currency)){
					this.$msg("账户资产不足!")
					return;
				}
				if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
					this.$msg("手机号格式不正确！")
					return;
				}
				let data = {
					type:1,
					quantity:this.acount,
					member_account:this.phone,
					remarks:this.remarks
				}
				let res = await transfer(data);
				if(res.code === 1){
					this.setUserInfo_action();
					this.phone="";
					this.remarks="";
					this.acount="";
					this.charge="";
					this.isDisplay=true;
				}
				this.$msg(res.msg)
			},
			extract(){
				this.acount = this.userInfo.currency;
			}
		},
		watch:{
			acount(newVal){
				this.isDisplay = !newVal || !this.phone;
				this.charge = (Number(this.fee)/100*newVal).toFixed(2)
			},
			phone(newVal){
				this.isDisplay = !newVal || !this.acount
			}
		}
	}
</script>

<style lang="less" scoped src="./transfer.less">
</style>
